import React from 'react'
import { connect } from 'mirrorx'
import BlockItem from './block-item'
import { Button, Icon, Radio } from 'antd-mobile'

class App extends React.Component {
  constructor (props) {
    super(props)

    this.selectBenefit = this.selectBenefit.bind(this)
    this.addItemAction = this.addItemAction.bind(this)
    this.deleteItemAction = this.deleteItemAction.bind(this)

    this.state = {
      unfoldMap: {flag: false},
      dataList: this.getInitDataList(props.initValueArr),
      benefitType: props.benefitType || 1
    }

    this.tempLen = this.state.dataList.length
  }

  componentWillReceiveProps (nextProps) {
    if (nextProps.initValueArr !== this.props.initValueArr) {
      this.setInitDataList(nextProps.initValueArr)
    }

    if (nextProps.benefitType !== this.props.benefitType) {
      this.setState({benefitType: nextProps.benefitType || 1})
    }
  }

  componentDidMount () {
    this.setState({
      unfoldMap: {
        flag: true,
        id: this.state.dataList[0] && this.state.dataList[0].id
      }
    })
  }

  getInitDataList (initValueArr) {
    if (initValueArr) {
      return initValueArr.map((item, index) => { return {id: index + 1, values: item} })
    } else {
      return [{id: 1}]
    }
  }

  setInitDataList (initValueArr) {
    if (!initValueArr || (initValueArr && initValueArr.length === 0)) {
      return
    }

    let dataList = this.getInitDataList(initValueArr)
    if (this.tempLen < dataList.length) {
      this.tempLen = dataList.length
    }

    this.setState({dataList})
  }

  getBlockItemIndexTitle (itemIndex, item) {
    const {dataList, unfoldMap} = this.state
    const {step} = this.props
    let flag = dataList.length > 1
    let isUnfold = unfoldMap.flag === true && unfoldMap.id === item.id // 是否是展开的那一项
    if (step !== 1) {
      isUnfold = true
    }
    let foldText = isUnfold ? '折叠' : '展开'
    let foldClass = isUnfold ? <Icon type='up' /> : <Icon type='down' />
    return (
      <div className='bor-bottom'>
        <div className='index clearfix'>
          <label>受益人{itemIndex + 1}</label>

          {step === 1 &&
            <span className='fold fr' onClick={() => this.titleClick(item.id)}>
              {foldText}{foldClass}
            </span>
          }

          {flag && step === 1 &&
            <span className='fr' onClick={() => this.deleteItemAction(item.id)}>删除<i className='icon-shanchu' /></span>
          }
        </div>
      </div>
    )
  }

  // 添加受益人
  addItemAction () {
    this.tempLen++
    this.setState((oldState) => Object.assign(oldState, {
      dataList: [...oldState.dataList, ...[{id: this.tempLen}]],
      unfoldMap: {flag: true, id: this.tempLen}
    }))
  }

  // 删除受益人
  deleteItemAction (id) {
    if (this.state.dataList.length <= 1) {
      return
    }

    let dataList = this.state.dataList
    dataList = dataList.filter((item) => {
      return item.id !== id
    })
    this.setState({dataList})
  }

  titleClick (id) {
    let {unfoldMap} = this.state
    let flag
    if (unfoldMap.id !== id) {
      flag = true
    } else {
      flag = !unfoldMap.flag
    }

    this.setState(
      {unfoldMap: {flag, id}}
    )
  }

  // 选择受益人类型
  selectBenefit (e, value) {
    this.setState({benefitType: +value})
  }

  // 获取选择受益人dom
  getBenefitChoose () {
    const {step} = this.props
    const {benefitType} = this.state

    return (
      <div className='benefit-box'>
        <div className='benefit-title'>受益人信息</div>
        <div className='benefit-type ml10'>
          <Radio disabled={step !== 1} className='my-radio' value='1' checked={benefitType === 1} onChange={() => { this.setState({benefitType: 1}) }}>
            <label className='name'>个人遗产</label>
          </Radio>
          <Radio disabled={step !== 1} className='my-radio' value='2' checked={benefitType === 2} onChange={() => { this.setState({benefitType: 2}) }}>
            <label className='name'>指定他人</label>
          </Radio>
        </div>

      </div>

    )
  }

  render () {
    const {dataList = [], unfoldMap, benefitType} = this.state
    const {step} = this.props

    return (
      <div >
        <div>
          {this.getBenefitChoose()}

          {benefitType !== 1 && dataList.map((item, index) => {
            let isUnfold = unfoldMap.flag === true && unfoldMap.id === item.id // 是否是展开的那一项
            if (step !== 1) {
              isUnfold = true
            }

            return <div key={item.id}>
              {this.getBlockItemIndexTitle(index, item)}

              <div className={isUnfold ? '' : 'none'}>
                <BlockItem
                  {...this.props}
                  type={3}
                  blockItem={item}
                  itemIndex={index}
                  benefitType={benefitType}
                />
              </div>

            </div>
          })
          }

          {step === 1 && benefitType !== 1 &&
          <div className='pl40 pr40 mt40'>
            <Button onClick={this.addItemAction}>+ 添加受益人</Button>
          </div>
          }
        </div>
      </div>
    )
  }
}

export default connect(state => {
  return {initValueObj: state.insureModel.initValueObj}
})(App)
